<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Bootstrappin'</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Main Style Sheet -->
        <link rel="stylesheet" href="css/main.css">
        <!-- Modernizr -->
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
        <!-- Respond.js for IE 8 or less only -->
        <!--[if (lt IE 9) & (!IEMobile)]>
            <script src="js/vendor/respond.min.js"></script>
        <![endif]-->

    </head>
    <body class="homepage">
        <!--[if lte IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

    <header role="banner">
        <nav role="navigation" class="navbar navbar-default navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="Bootstrappin'" width="120"></a>
            </div>
            <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#welcome">Welcome</a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#impact">Impact</a></li>
                <li><a href="#signup">Sign Up</a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div><!--/.container -->
        </nav>
    </header>

    <main role="main">

      <!-- INTRO SECTION -->
      <section id="welcome" class="jumbotron">
        <div class="container">
          <h1><strong>Big</strong> Welcome Message</h1>
          <p>Ingenious marketing copy. And some <em>more</em> ingenious marketing copy.<a href="#features" class="btn btn-lg btn-primary pull-right">Learn more <span class="icon fa fa-arrow-circle-down"></span></a></p>
        </div>
      </section>

      <!-- FEATURES SECTION -->
      <section id="features">
        <div class="container">
          <h1>Features</h1>
          <div class="row">
            <div class="features-item col-md-4">
              <span class="icon fa fa-cloud"></span>
              <h2>Feature 1</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo. </p>
            </div>
            <div class="features-item col-md-4">
              <span class="icon fa fa-group"></span>
              <h2>Feature 2</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo. </p>
            </div>
            <div class="features-item col-md-4">
              <span class="icon fa fa-comments"></span>
              <h2>Feature 3</h2>
              <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
            </div>
            <div class="features-item col-md-4">
              <span class="icon fa fa-leaf"></span>
              <h2>Feature 4</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo. </p>
            </div>
            <div class="features-item col-md-4">
              <span class="icon fa fa-download"></span>
              <h2>Feature 5</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo. </p>
            </div>
            <div class="features-item col-md-4">
              <span class="icon fa fa-coffee"></span>
              <h2>Feature 6</h2>
              <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
            </div>
          </div><!-- /.row -->
        </div><!-- /.container -->
      </section><!-- /.row -->

      <!-- IMPACT SECTION -->
      <section id="impact">
        <div class="container">
          <h1>Impact</h1>
          <div class="reviews">
            <div class="hreview review-item-1 thumbnail">
              <img src="img/smiling1-by-RomainGuy-600x900.jpg" alt="Customer Photo1">
              <div class="caption">
                <blockquote class="description"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod, nulla pretium commodo ultricies</p></blockquote>
                <p class="reviewer">Smiling Customer1</p>
              </div><!-- /.caption -->
            </div><!-- /.hreview -->
            <div class="hreview review-item-2 thumbnail">
              <img src="img/smiling2-by-Christopher-Connell-600x400.jpg" alt="Customer Photo2">
              <div class="caption">
                <blockquote class="description"><p>Lorem ipsum dolor sit amet</p></blockquote>
                <p class="reviewer">Smiling Customers2</p>
              </div><!-- /.caption -->
            </div><!-- /.hreview -->
            <div class="hreview review-item-3 thumbnail">
              <img src="img/smiling3-by-BerkDDemir-600x900.jpg" alt="Customer Photo3">
              <div class="caption">
                <blockquote class="description"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod, nulla</p></blockquote>
                <p class="reviewer">Smiling Customer3</p>
              </div><!-- /.caption -->
            </div><!-- /.hreview -->
            <div class="hreview review-item-4 thumbnail">
              <img src="img/smiling4-by-Trung-Hieu-600x400.jpg" alt="Customer Photo4">
              <div class="caption">
                <blockquote class="description"><p>Lorem ipsum dolor sit amet</p></blockquote>
                <p class="reviewer">Smiling Customer4</p>
              </div><!-- /.caption -->
            </div><!-- /.hreview -->
            <div class="hreview review-item-5 thumbnail">
              <img src="img/smiling5-by-Ali-Burcin-Titizel-600x900.jpg" alt="Customer Photo5">
              <div class="caption">
                <blockquote class="description"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod, nulla pretium commodo ultricies</p></blockquote>
                <p class="reviewer">Smiling Customer5</p>
              </div><!-- /.caption -->
            </div><!-- /.hreview -->
            <div class="hreview review-item-6 thumbnail">
              <img src="img/smiling6-by-Keith-Williamson-600x400.jpg" alt="Customer Photo6">
              <div class="caption">
                <blockquote class="description"><p>Lorem ipsum dolor sit amet elit.</p></blockquote>
                <p class="reviewer">Smiling Customer6</p>
              </div><!-- /.caption -->
            </div><!-- /.hreview -->
            <div class="hreview review-item-7 thumbnail">
              <img src="img/smiling7-by-Victor1558-600x400.jpg" alt="Customer Photo7">
              <div class="caption">
                <blockquote class="description"><p>Lorem ipsum dolor sit amet ... elit.</p></blockquote>
                <p class="reviewer">Smiling Customer7</p>
              </div><!-- /.caption -->
            </div><!-- /.hreview -->
          </div><!-- /.reviews -->
        </div><!-- /.container -->
      </section><!-- /#impact -->

      <!-- SIGNUP SECTION -->
      <section id="signup">
        <div class="container">
          <h1>Sign up now!</h1>
          <div class="package package-basic col-md-4">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th colspan="2">
                    <h2>Basic Plan</h2>
                    <div class="price">$19</div>
                  </th>
                </tr>
              </thead>
              <tfoot>
                <tr><td colspan="2"><a href="#" class="btn">Sign up now!</a></td></tr>
              </tfoot>
              <tbody>
                <tr><td>Feature</td><td>Name</td></tr>
                <tr><td>Feature</td><td>Name</td></tr>
                <tr><td>Feature</td><td>Name</td></tr>
                <tr><td>Feature</td><td>Name</td></tr>
                <tr><td>Feature</td><td>Name</td></tr>
              </tbody>
            </table>
          </div><!-- /.package .package-basic -->
          <div class="package package-premium col-md-4">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th colspan="2">
                    <h2>Premium Plan</h2>
                    <div class="price">$29</div>
                  </th>
                </tr>
              </thead>
              <tfoot>
                <tr><td colspan="2"><a href="#" class="btn">Sign up now!</a></td></tr>
              </tfoot>
              <tbody>
                <tr><td>Feature</td><td>Name</td></tr>
                <tr><td>Feature</td><td>Name</td></tr>
                <tr><td>Feature</td><td>Name</td></tr>
                <tr><td>Feature</td><td>Name</td></tr>
                <tr><td>Feature</td><td>Name</td></tr>
              </tbody>
            </table>
          </div><!-- /.package .package-premium -->
          <div class="package package-pro col-md-4">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th colspan="2">
                    <h2>Pro Plan</h2>
                    <div class="price">$39</div>
                  </th>
                </tr>
              </thead>
              <tfoot>
                <tr><td colspan="2"><a href="#" class="btn">Sign up now!</a></td></tr>
              </tfoot>
              <tbody>
                <tr><td>Feature</td><td>Name</td></tr>
                <tr><td>Feature</td><td>Name</td></tr>
                <tr><td>Feature</td><td>Name</td></tr>
                <tr><td>Feature</td><td>Name</td></tr>
                <tr><td>Feature</td><td>Name</td></tr>
              </tbody>
            </table>
          </div><!-- /.package .package-pro -->
        </div><!-- /.container -->
      </section><!-- /#signup -->

    </main>

    <footer role="contentinfo">
      <div class="container">

        <p class="copyright"><a href="index.html"><img src="img/logo.png" width="80" alt="Bootstrappin'"></a></p>

        <p class="photo-credits"><a href="photo-credits.html" title="Photo Credits">Photo Credits</a></p>

      </div>
    </footer>

    <!-- JavaScript -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
        var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>
</body>
</html>
